<template>
	<view>
		<cu-custom bgColor="bg-orange" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">统计与报表</block>
		</cu-custom>
		<view class="header">
			<view class="box1">
				<view class="text">账单总览</view>
				<view class="time">
					<view class="year">{{year}}年</view>
					<view class="month" @click="showmonth">{{month}}月
						<van-icon name="arrow" />
					</view>
				</view>
			</view>
			<view class="box2">
				<view class="son1">
					<view class="text">月支出</view>
					<view>{{output}}</view>
				</view>
				<view class="son1">
					<view class="text">月收入</view>
					<view>{{input}}</view>
				</view>
				<view class="son1">
					<view class="text">月结余</view>
					<view>{{input-output}}</view>
				</view>
			</view>
		</view>
		<van-tabs :active="active" @click="onClick">
			<van-tab title="支出">
				<view class="echarts">
					<l-echart ref="chart1" @finished="init1"></l-echart>
				</view>
			</van-tab>
			<van-tab title="收入">
				<view class="echarts">
					<l-echart ref="chart2" @finished="init2"></l-echart>
				</view>
			</van-tab>
		</van-tabs>

		<van-popup :show="show" position="bottom" :round="true" custom-style='height:400rpx' integer>
			<van-datetime-picker type="year-month" :value="value" @input="onInput" :max-date=" maxDate" title='选择时间'
				@confirm='confirmtime' @cancel='canceltime' />
		</van-popup>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	// 将npm方式下载的echarts插件引入进来
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	export default {
		computed: {
			...mapState('m_pay', ['payinfo']),
			...mapState('m_user', ['token', 'userinfo']),
		},
		data() {
			return {
				active: 0,
				year: new Date().getFullYear(),
				value: new Date().getTime(),
				month: new Date().getMonth() + 1,
				input: 0.00,
				output: 0.00,
				show: false,
				maxDate: new Date().getTime(),
				day: '',
				rightinfo: '',
				data1: [{
						value: 0,
						name: '购物'
					},
					{
						value: 0,
						name: '社交'
					},
					{
						value: 0,
						name: '医疗'
					},
					{
						value: 0,
						name: '教育'
					},
					{
						value: 0,
						name: '其他'
					},
				],
				data2: [{
						value: 0,
						name: '工资'
					},
					{
						value: 0,
						name: '兼职'
					},
					{
						value: 0,
						name: '理财'
					},
					{
						value: 0,
						name: '礼金'
					},
					{
						value: 0,
						name: '其他'
					},
				],
				data3: [{
						value: 0,
						name: '购物'
					},
					{
						value: 0,
						name: '社交'
					},
					{
						value: 0,
						name: '医疗'
					},
					{
						value: 0,
						name: '教育'
					},
					{
						value: 0,
						name: '其他'
					},
				],
				data4: [{
						value: 0,
						name: '工资'
					},
					{
						value: 0,
						name: '兼职'
					},
					{
						value: 0,
						name: '理财'
					},
					{
						value: 0,
						name: '礼金'
					},
					{
						value: 0,
						name: '其他'
					},
				],
			};
		},

		onShow() {
			this.getrightinfo()
		},
		onLoad() {
			this.getrightinfo()
			this.$refs.chart1.resize({
				width: 337,
				height: 375
			})
			this.$refs.chart2.resize({
				width: 337,
				height: 375
			})
			this.init1()
			this.init2()

		},
		methods: {
			...mapMutations('m_pay', ['updatepayinfo']),
			onClick(e) {
				this.active = e.detail.index
				this.$refs.chart1.resize({
					width: 337,
					height: 375
				})
				this.$refs.chart2.resize({
					width: 337,
					height: 375
				})
			},
			async init1() {
				const chart1 = await this.$refs.chart1.init(echarts);
				chart1.setOption({
					grid: {
						left: 20,
						right: 20,
						bottom: 15,
						top: 40,
						containLabel: true
					},
					title: {
						text: '账单图表',
					},
					tooltip: {
						trigger: 'item',
					},

					legend: {
						top: 'bottom'
					},
					toolbox: {
						show: true,
						feature: {
							mark: {
								show: true
							},
						}
					},
					series: [{
							name: '账单图表',
							type: 'pie',
							radius: [20, 140],
							center: ['50%', '50%'],
							roseType: 'radius',
							itemStyle: {
								borderRadius: 5
							},
							label: {
								show: false
							},

							data: this.data1
						},

					]
				})

			},
			async init2() {
				const chart2 = await this.$refs.chart2.init(echarts);
				chart2.setOption({
					title: {
						text: '账单图表',
					},
					tooltip: {
						trigger: 'item',
					},

					legend: {
						top: 'bottom'
					},
					toolbox: {
						show: true,
						feature: {
							mark: {
								show: true
							},
						}
					},
					series: [{
							name: '账单图表',
							type: 'pie',
							radius: [20, 140],
							center: ['50%', '50%'],
							roseType: 'radius',
							itemStyle: {
								borderRadius: 5
							},
							label: {
								show: false
							},

							data: this.data2
						},

					]
				})
			},
			showmonth() {
				this.show = true
			},
			onInput(e) {
				this.value = e.detail
			},
			confirmtime() {
				this.show = false
				const date = new Date(this.value); // 创建一个 Date 对象，传入时间戳作为参数

				this.year = date.getFullYear(); // 获取年份
				this.month = date.getMonth() + 1; // 获取月份（注意要加 1，因为月份是从 0 开始计数）
				this.day = date.getDate(); // 获取日期

				this.data1 = JSON.parse(JSON.stringify(this.data3));
				this.data2 = JSON.parse(JSON.stringify(this.data4));
				this.getrightinfo()
				this.init1()
				this.init2()
			},
			canceltime() {
				this.show = false
			},
			getrightinfo() {
				this.rightinfo = this.payinfo.filter(item => {
					const index = item.time.split('/')
					return index[0] == this.year && index[1] == this.month
				})
				this.input = 0
				this.output = 0
				this.rightinfo.forEach(item => {
					if (item.attribute == '支出') {
						this.output += item.num
						for (let i = 0; i < this.data1.length; i++) {
							if (this.data1[i].name === item.type) {
								this.data1[i].value += item.num; //将value值修改为100
								break; //找到需要修改的对象后退出循环
							}
						}
					} else {
						this.input += item.num
						for (let i = 0; i < this.data2.length; i++) {
							if (this.data2[i].name === item.type) {
								this.data2[i].value += item.num;
								break; //找到需要修改的对象后退出循环
							}
						}
					}

				})
			},
		}
	}
</script>

<style lang="less">
	.header {
		width: 90%;
		height: 300rpx;
		background-color: beige;
		border-radius: 30rpx;
		margin-left: 38rpx;
		margin-top: 20rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;

		// align-items: center
		.box1 {
			display: flex;
			margin-top: 45rpx;
			margin-left: 30rpx;
			font-size: 40rpx;
			width: 90%;

			.time {
				display: flex;
				margin-left: 100rpx;
			}
		}

		.box2 {
			width: 90%;
			display: flex;
			justify-content: space-between;
			margin-top: 50rpx;
			margin-left: 30rpx;

			.son1 {
				display: flex;
				flex-direction: column;
				font-size: 30rpx;

				.text {
					color: #a79c8e;
					font-size: 35rpx;
				}
			}
		}
	}

	.echarts {
		width: 90%;
		height: 900rpx;
		background-color: beige;
		border-radius: 30rpx;
		margin-left: 38rpx;
		margin-top: 50rpx;
	}
</style>